<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-09-23 09:20:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-09-23 10:23:00
 * @FilePath: \new-face-ordering-data-screen\src\components\Common\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="HeaderBox">
        <!-- <el-row class="logo-and-title align-items" v-if="innerHeight.toFixed(3) <= 1.778"> -->
        <el-row class="logo-and-title align-items">
            <el-col class="infoSchool" :span="8">
                <el-image :src="SchoolInfo.school_logo"></el-image>
                <label>{{ SchoolInfo.school_name }}</label>
            </el-col>
            <el-col :span="8" style="text-align: center;">
                <div class="title">饭堂消费统计分析大屏</div>
            </el-col>
            <el-col :span="8">
                <el-row type="flex" justify="end" class="align-items school-msg-box">
                    {{ dayFont }}<label>{{ timesFont }}</label>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
// import { PiniaStore } from '../../store/index'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted, onUnmounted } from "vue";
import $util from "../../util/util";
import { getSchoolInfo,getTimesApi } from '../Options/Api'
const innerHeight = ref<any>(document.documentElement.clientWidth / document.documentElement.clientHeight)
// const store = PiniaStore()
const SchoolInfo = reactive({
    school_id: '', // 学校id
    school_name: '', // 学校名称
    school_logo: '', // 学校logo
})
const timesFont = ref('')
const dayFont = ref('')
const setTimew = ref<any>(null)
const getTimes = async () => {
    const res: any = await getTimesApi()
    if (res.code !== 1) return ElMessage.error(res.msg)
    let times = JSON.parse(res.data.time)
    setTimew.value = setInterval(() => {
        times = times + 1
        dayFont.value = $util.changeDate(times, 1)
        timesFont.value = $util.changeDate(times, 2)
    }, 1000)
}
const getShool = async () => {
    const res: any = await getSchoolInfo()
    if (res.code !== 1) return ElMessage.error(res.msg)
    Object.keys(res.data).forEach(item => {
        if (item.indexOf('-') !== -1) {
            if (Number(item.split('-')[0]) === 1) {
                // 获取学校的id 如果id是77，也就是未来学校，就把外出状态放出来
                SchoolInfo.school_id = res.data[item]
            } else if (Number(item.split('-')[0]) === 2) {
                SchoolInfo.school_name = res.data[item]
            } else if (Number(item.split('-')[0]) === 11) {
                SchoolInfo.school_logo = res.data[item]
            }
        }
    })
}
onMounted(async () => {
    getShool()
    getTimes()
    window.addEventListener('resize', () => {
        setTimeout(async () => {
            innerHeight.value = document.documentElement.clientWidth / document.documentElement.clientHeight
        }, 0)
    })
});
onUnmounted(() => {
    clearInterval(setTimew.value)
});
defineExpose({ getTimes })
</script>
<style lang="scss" scoped>
.HeaderBox {
    color: #ffffff;
    font-weight: bold;
    // height: 80px;

    .logo-and-title {
        padding: 0 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-image: url("@/assets/images/headBg.png");
        background-size: 100% 100%;
        height: 89px;

        .infoSchool {
            display: flex;
            align-items: center;
            .el-image {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: #FFFFFF;
            }
            label {
                font-size: 20px;
                margin-left: 15px;
            }

        }
        label {
                font-size: 20px;
                margin-left: 10px;
            }

        .title {
            font-family: 'DingTalk JinBuTi';
            font-size: 38px;
            font-weight: 400;
            margin-top: -8px;
        }

        .school-msg-box {
            font-size: 20px;
        }
    }
}
</style>